<template>
  <div>
    <el-dialog class="sys_box"
               width="840"
               :close-on-click-modal="false"
                 :modal-append-to-body="false"
               :visible.sync="$store.getters.sysMonitor">
      <img src="@/assets/images/emerge/closed.png"
           @click="closed_sys_box"
           class="closed_img"
           alt="">
      <div class="title">
        <div class="mask"></div>
        <span class="title_name">Topology</span>
      </div>
      <div id="graph">
        <button @click="show_detail">detail</button>
        <!-- <div class="list list1">
          <el-tooltip class="item"
                      effect="dark"
                      :content="tips1"
                      placement="right">
            <el-button>
              <img src="@/assets/images/home/common/img1.png"
                   class="l_img"
                   alt="">
            </el-button>
          </el-tooltip>
        </div>
        <div class="list list2">
          <el-tooltip class="item"
                      effect="dark"
                      :content="tips2"
                      placement="left">
            <el-button>
              <img src="@/assets/images/home/common/img2.png"
                   class="l_img"
                   alt="">
            </el-button>
          </el-tooltip>
        </div>
        <div class="list list3">
          <el-tooltip class="item"
                      effect="dark"
                      :content="tips3"
                      placement="right">
            <el-button>
              <img src="@/assets/images/home/common/img3.png"
                   class="l_img"
                   alt="">
            </el-button>
          </el-tooltip>
        </div> -->
      </div>
    </el-dialog>
    <el-dialog class="sys_detail"
               width="840"
               :close-on-click-modal="false"
                 :modal-append-to-body="false"
               :visible.sync="state_detail">
      <img src="@/assets/images/emerge/closed.png"
           @click="closed_detail"
           class="closed_img"
           alt="">
      <div class="title">
        <div class="mask"></div>
        <span class="title_name">System Monitoring</span>
      </div>
      <div class="sys_detail_content">
        <div class="detail_item">
          <p>CPU</p>
          <div id='cpu'></div>
        </div>
        <div class="detail_item">
          <p>Memery</p>
          <div id='memery'></div>
        </div>
        <div class="detail_item">
          <p>Disk</p>
          <div id='disk'></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "safe",
  data () {
    return {
      state_detail: false,
      tips1: 'Engine',
      tips2: 'Sandbox',
      tips3: 'Sensor',
      equipment: {
        probe: [],
        engine: [],
        sandbox: []
      },
      //---
      base64: '',
      graph_echart_array: [],
      graph_echart_array_item: [],
      probe_array: [],
      engine_array: [],
      links_array: [],
      sysState_data: {},
      only_one: false,
      only_to: false,
    };
  },
  created () {
    console.log(document.getElementById("graph"));
    this.$nextTick(function () {
      this.get_data()
      console.log(document.getElementById("graph"));
    })
  },
  mounted () {
    console.log(document.getElementById("graph"));
  },
  methods: {
    get_data () {
      this.$axios.get('/yiiapi/alert/system-state')
        .then(response => {
          let { status, data } = response.data;
          console.log(data);
          this.sysState_data = data
          data.dev_info.forEach(element => {
            //       { name: '引擎', type: "2" },
            // { name: '沙箱', type: "4" },
            // { name: '探针', type: "1" },
            switch (element.type) {
              case '1':
                this.equipment.probe.push(element)
                break;
              case '2':
                this.equipment.engine.push(element)
                break;
              case '4':
                this.equipment.sandbox.push(element)
                break;
              default:
                break;
            }
          });
          console.log(document.getElementById("graph"));
          setTimeout(() => {
            this.graph_echart()
            console.log(document.getElementById("graph"));
          }, 10000);
        })
        .catch(error => {
          console.log(error);
        })
    },

    // 拓扑图
    graph_echart () {
      this.graph_echart_array = [];
      this.graph_echart_array_item = {};
      // 探针数组
      this.probe_array = [];
      // 引擎数组
      this.engine_array = [];
      // 引擎和探针的关系
      this.links_array = [];
      this.sysState_data.dev_info.forEach(item => {
        if (item.status == 'offline') {
          item.status = 'offline'
        } else if (item.status == 'online') {
          item.status = 'online'
        }
        // 判断类型
        if (item.dev_type == '1') {
          this.only_one = true;
          this.probe_array.push(item);
        }
        if (item.dev_type == '2') {
          this.only_to = true;
          this.engine_array.push(item);
        }
        if (item.dev_type == '3') {
          this.only_one = false;
          this.graph_echart_array_item = {
            name: 'node0',
            names: 'online/Sensor',
            dev_ip: item.dev_ip,
            status: item.status,
            x: 350,
            y: 200,
            symbol: this.base64,
            //节点上面的文字
            label: {
              normal: {
                position: "bottom",
                show: true,
                textStyle: {
                  fontSize: 12,
                  color: '#666',
                  align: 'center',
                },
                formatter: 'Engine/Sensor'
              }
            }
          }
          this.graph_echart_array.push(this.graph_echart_array_item);
        }
      });
      if (this.only_one) {
        // 多个探针 模版
        this.probe_array.forEach(item => {
          this.data_item1 = {
            name: 'node1',
            x: 300,
            y: 100,
            symbol: this.base64,
            names: 'Sensor',
            dev_ip: item.dev_ip,
            status: item.status,
            //节点上面的文字
            label: {
              normal: {
                position: "bottom",
                show: true,
                textStyle: {
                  fontSize: 12,
                  color: '#666',
                  align: 'center',
                },
                formatter: 'Sensor'
              }
            }
          };
          this.links_item = {
            source: 'node0',
            target: 'node1',
            dev_ip: item.dev_ip,
            status: item.status,
            names: 'Sensor'
          };
          switch (index) {
            case 0:
              this.data_item1.name = 'node1';
              this.links_item.target = 'node1';
              this.data_item1.x = 100;
              this.data_item1.y = 200;
              this.graph_echart_array.push(this.data_item1);
              this.links_array.push(this.links_item);
              break;
            case 1:
              this.data_item1.name = 'node2';
              this.links_item.target = 'node2';
              this.data_item1.x = 100;
              this.data_item1.y = 100;
              this.graph_echart_array.push(this.data_item1);
              this.links_array.push(this.links_item);
              break;
            case 2:
              this.data_item1.name = 'node3';
              this.links_item.target = 'node3';
              this.data_item1.x = 100;
              this.data_item1.y = 300;
              this.graph_echart_array.push(this.data_item1);
              this.links_array.push(this.links_item);
              break;
            case 3:
              this.data_item1.name = 'node4';
              this.links_item.target = 'node4';
              this.data_item1.x = 600;
              this.data_item1.y = 200;
              this.graph_echart_array.push(this.data_item1);
              this.links_array.push(this.links_item);
              break;
            case 4:
              this.data_item1.name = 'node5';
              this.links_item.target = 'node5';
              this.data_item1.x = 600;
              this.data_item1.y = 100;
              this.graph_echart_array.push(this.data_item1);
              this.links_array.push(this.links_item);
              break;
            case 5:
              this.data_item1.name = 'node6';
              this.links_item.target = 'node6';
              this.data_item1.x = 600;
              this.data_item1.y = 300;
              this.graph_echart_array.push(this.data_item1);
              this.links_array.push(this.links_item);
              break;
            case 6:
              this.data_item1.name = 'node7';
              this.links_item.target = 'node7';
              this.data_item1.x = 300;
              this.data_item1.y = 100;
              this.graph_echart_array.push(this.data_item1);
              this.links_array.push(this.links_item);
              break;
            case 7:
              this.links_item.target = 'node8';
              this.data_item1.name = 'node8';
              this.data_item1.x = 300;
              this.data_item1.y = 300;
              this.graph_echart_array.push(this.data_item1);
              this.links_array.push(this.links_item);
              break;
            default:
              break;
          };
        });
      }
      if (this.only_to) {
        // 2 一台引擎模版
        this.data_item0 = {
          name: "node0",
          x: 350,
          y: 200,
          symbol: this.base64,
          names: "Engine",
          dev_ip: this.engine_array[0]
            .dev_ip,
          status: this.engine_array[0]
            .status,
          //节点上面的文字
          label: {
            normal: {
              position: "bottom",
              show: true,
              textStyle: {
                fontSize: 12,
                color: "#666",
                align: "center",
              },
              formatter: "Engine",
            },
          },
        };
        // 一台引擎
        if (
          this.engine_array
            .length == 1
        ) {
          this.graph_echart_array.push(
            this.data_item0
          );
        }
      }
      setTimeout(() => {
        var myChart = this.$echarts.init(document.getElementById("graph"));
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: function (params, trigger) {
              return 'Equipment:' + params.data.names + '</br>' + 'IP address:' + params.data.dev_ip + '</br>' + 'Status:' + params.data.status
            }
          },
          animationDurationUpdate: 1000,
          animationEasingUpdate: 'quinticInOut',
          series: [{
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
              normal: {
                show: false
              }
            },
            focusNodeAdjacenc: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
            edgeSymbol: ['arrow', 'arrow'],
            edgeSymbolSize: [7, 7],
            edgeLabel: {
              normal: {
                show: false
              },
              emphasis: {
                textStyle: {
                  fontSize: 30 //边节点显示的字体大小
                }
              }
            },
            data: this.graph_echart_array,
            links: this.links_array,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0
              }
            }
          }]
        };
        myChart.clear(); //只是清理画布，而不会删除 生成的元素节点
        myChart.setOption(option);
        //添加点击事件
        myChart.off("click"); //防止累计触发
        myChart.on('click', function (params) {
          console.log(params);
          // 弹窗打印数据的名称
          // this.iot_detail_title = params;
          // if (params.dataType == "node") {
          //   this.iotcontent = true;
          //   setTimeout(function () {
          //     this.iot_detail_top(this.iot_detail_title); //iot具体cpu/内存/硬盘/流量
          //   }, 600);
          // }
        })
      }, 1000);

    },

    closed_sys_box () {
      this.$store.commit("CHANGE_SYS", false);
    },
    show_detail () {
      this.state_detail = true;
      setTimeout(() => {
        this.cpu();
        this.memery();
        this.disk();
      }, 10);
    },
    closed_detail () {
      this.state_detail = false;
    },
    graph () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("graph"));
      // 绘制图表
      var option = {
        tooltip: {
          trigger: "item",
          formatter: function (params, trigger) {
            return (
              "Equipment:" +
              params.data.names +
              "</br>" +
              "IP address:" +
              params.data.dev_ip +
              "</br>" +
              "Status:" +
              params.data.status
            );
          }
        },
        animationDurationUpdate: 1000,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "none",
            symbolSize: 50,
            roam: true,
            label: {
              normal: {
                show: false
              }
            },
            focusNodeAdjacenc: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
            edgeSymbol: ["arrow", "arrow"],
            edgeSymbolSize: [7, 7],
            edgeLabel: {
              normal: {
                show: false
              },
              emphasis: {
                textStyle: {
                  fontSize: 30 //边节点显示的字体大小
                }
              }
            },
            data: [
              {
                name: "node0",
                x: 350,
                y: 200,
                symbol: this.base64,
                names: "Engine",
                dev_ip: "192.168.1.1",
                status: "0",
                //节点上面的文字
                label: {
                  normal: {
                    position: "bottom",
                    show: true,
                    textStyle: {
                      fontSize: 12,
                      color: "#666",
                      align: "center"
                    },
                    formatter: "Engine"
                  }
                }
              }
            ],
            links: this.links_array,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 2,
                curveness: 0
              }
            }
          }
        ]
      };
      myChart.clear(); //只是清理画布，而不会删除 生成的元素节点
      myChart.setOption(option);
      //添加点击事件
      myChart.off("click"); //防止累计触发
      myChart.on("click", function (params) {
        // 弹窗打印数据的名称
        this.iot_detail_title = params;
        if (params.dataType == "node") {
          this.iotcontent = true;
          setTimeout(function () {
            this.iot_detail_top(this.iot_detail_title); //iot具体cpu/内存/硬盘/流量
          }, 600);
        }
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    cpu () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("cpu"));
      // 绘制图表
      myChart.setOption({
        grid: {
          top: "10%",
          left: 0,
          right: "5%",
          bottom: "5%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          borderColor: "rgba(2,136,209,0.3)",
          borderWidth: 2,
          backgroundColor: "#fff",
          textStyle: {
            color: "#ccc"
          },
          axisPointer: {
            lineStyle: {
              color: "#ccc"
            }
          }
        },
        color: ["#0288D1"],
        xAxis: {
          boundaryGap: false,
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#F4F4F4"],
              width: 1,
              type: "solid"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#ECECEC",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },
          axisTick: {
            show: false
          },
          data: [
            "08:00",
            "08:10",
            "08:20",
            "08:30",
            "08:40",
            "08:50",
            "09:00",
            "09:10",
            "09:20",
            "09:30",
            "09:40",
            "09:50",
            "10:00"
          ]
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F4F4F4",
              width: 1,
              type: "solid"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#ECECEC",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "cpu",
            type: "line",
            symbol: "none",
            cursor: "pointer",
            smooth: true,
            data: [32, 14, 16, 30, 35, 20, 18, 32, 14, 16, 30, 35, 20, 18],
            lineStyle: {
              color: "#0288D1"
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(2,136,209,0.3)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(2,136,209,0.1)" // 100% 处的颜色
                  }
                ]
              }
            }
          }
        ]
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    memery () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("memery"));
      // 绘制图表
      myChart.setOption({
        grid: {
          top: "10%",
          left: 0,
          right: "5%",
          bottom: "5%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          borderColor: "rgba(205,220,57,0.3)",
          borderWidth: 2,
          backgroundColor: "#fff",
          textStyle: {
            color: "#ccc"
          },
          axisPointer: {
            lineStyle: {
              color: "#ccc"
            }
          }
        },
        color: ["#CDDC39"],
        xAxis: {
          boundaryGap: false,
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#F4F4F4"],
              width: 1,
              type: "solid"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#ECECEC",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },
          axisTick: {
            show: false
          },
          data: [
            "08:00",
            "08:10",
            "08:20",
            "08:30",
            "08:40",
            "08:50",
            "09:00",
            "09:10",
            "09:20",
            "09:30",
            "09:40",
            "09:50",
            "10:00"
          ]
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F4F4F4",
              width: 1,
              type: "solid"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#ECECEC",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "memery",
            type: "line",
            symbol: "none",
            cursor: "pointer",
            smooth: true,
            data: [32, 14, 16, 30, 35, 20, 18, 32, 14, 16, 30, 35, 20, 18],
            lineStyle: {
              color: "#CDDC39"
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(205,220,57,0.3)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(205,220,57,0.1)" // 100% 处的颜色
                  }
                ]
              }
            }
          }
        ]
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    disk () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("disk"));
      // 绘制图表
      myChart.setOption({
        grid: {
          top: "10%",
          left: 0,
          right: "5%",
          bottom: "5%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          borderColor: "rgba(71,202,217,0.3)",
          borderWidth: 2,
          backgroundColor: "#fff",
          textStyle: {
            color: "#ccc"
          },
          axisPointer: {
            lineStyle: {
              color: "#ccc"
            }
          }
        },
        color: ["#4CAF50"],
        xAxis: {
          boundaryGap: false,
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#F4F4F4"],
              width: 1,
              type: "solid"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#ECECEC",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },
          axisTick: {
            show: false
          },
          data: [
            "08:00",
            "08:10",
            "08:20",
            "08:30",
            "08:40",
            "08:50",
            "09:00",
            "09:10",
            "09:20",
            "09:30",
            "09:40",
            "09:50",
            "10:00"
          ]
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: "#F4F4F4",
              width: 1,
              type: "solid"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#ECECEC",
              width: 2
            }
          },
          axisLabel: {
            textStyle: {
              color: "#666666"
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "disk",
            type: "line",
            symbol: "none",
            cursor: "pointer",
            smooth: true,
            data: [32, 14, 16, 30, 35, 20, 18, 32, 14, 16, 30, 35, 20, 18],
            lineStyle: {
              color: "#4CAF50"
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(76,175,80,0.3)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(76,175,80,0.1)" // 100% 处的颜色
                  }
                ]
              }
            }
          }
        ]
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style lang="less">
.el-tooltip__popper {
  z-index: 9999 !important;
}
.sys_box {
  z-index: 3000 !important;

  .el-dialog {
    width: 842px;

    .el-dialog__header {
      display: none;
    }

    .el-dialog__body {
      width: 842px;
      height: 462px;
      padding: 30px;

      .closed_img {
        position: absolute;
        top: -18px;
        right: -18px;
        cursor: pointer;
        width: 46px;
        height: 46px;
      }
      .title {
        height: 24px;
        line-height: 24px;
        text-align: left;
        font-size: 0;

        .mask {
          width: 4px;
          height: 16px;
          display: inline-block;
          background: #0070ff;
          vertical-align: baseline;
        }

        .title_name {
          font-size: 16px;
          color: #333333;
          margin-left: 6px;
          display: inline-block;
          vertical-align: super;
          font-family: PingFangMedium;
        }
      }
      #graph {
        width: 100%;
        height: calc(100% - 24px);
        border: 1px solid red;
        position: relative;
        .list {
          width: 72px;
          height: 72px;
          position: absolute;
          /deep/ .el-button {
            padding: 0;
            border-width: 0;
            &:hover {
              background-color: #fff;
            }
            .l_img {
              width: 72px;
              height: 72px;
            }
          }
          &.list1 {
            top: 70px;
            left: 354px;
          }
          &.list2 {
            bottom: 90px;
            left: 260px;
          }
          &.list3 {
            bottom: 90px;
            right: 260px;
          }
        }
      }
    }
  }
}

.sys_detail {
  z-index: 99999 !important;
  .el-dialog {
    width: 840px;

    .el-dialog__header {
      display: none;
    }

    .el-dialog__body {
      width: 840px;
      padding: 30px;

      .closed_img {
        position: absolute;
        top: -24px;
        right: -24px;
        cursor: pointer;
      }

      .title {
        height: 24px;
        line-height: 24px;
        text-align: left;

        .title_name {
          font-size: 20px;
          color: #333333;
          line-height: 24px;
        }

        .mask {
          width: 24px;
          height: 0px;
          border-top: 0px;
          border-right: 2px solid transparent;
          border-bottom: 5px solid #0070ff;
          border-left: 2px solid transparent;
          transform: rotate3d(0, 0, 1, 90deg);
          display: inline-block;
          margin-right: -5px;
          margin-bottom: 4px;
          margin-left: -10px;
        }
      }

      .sys_detail_content {
        text-align: left;

        .detail_item {
          margin-top: 24px;

          p {
            font-size: 14px;
            color: #999999;
          }

          #cpu,
          #memery,
          #disk {
            height: 150px;
          }
        }
      }
    }
  }
}
</style>
